import React, {Component, Fragment} from 'react';
import TodoItem from './TodoItem';
import axios from 'axios';
import './style.css';

class TodoList extends Component {
  // js里 一个类一定有一个构造函数
  // constructor最优先执行
  constructor(props) {
    // TodoList组件继承了react里component组件
    // super指的是父类(component) super()调用父类构造函数
    super(props);
    // 当组件的state或者props发生改变的时候，render函数就会重新执行
    // 定义数据 组件的状态
    this.state = {
      inputValue: '',
      list: []
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
  }

  componentWillMount() {
    console.log('componentWillMount')
  }

  render () {
    console.log('render')
    return (
      <Fragment>
        <div>
          {/*这是一个注释 神不神奇*/}
          {
            // 呦 这也是一个注释    单行注释 请换行
          }
          <label htmlFor="insertArea">输入内容</label>
          <input type="text"
            ref={(input) => {this.input = input}}
            id="insertArea"
            className='input'
            value={this.state.inputValue}
            onChange={this.handleInputChange}/>
          <button onClick={this.handleBtnClick}>添加</button>
        </div>
        <ul ref={(ul) =>{this.ul = ul}}>
          {this.getTodoItem()}
        </ul>
      </Fragment>
    )
  }

  componentDidMount() {
    console.log('componentDidMount')
    // 数据请求
    // 使用charles 访问http://localhost.charlesproxy.com:3000/
    axios.get('/api/todolist')
      .then((res) => {
        this.setState(() => ({
          list: [...res.data]
        }))
      })
      .catch(() => {console.log('err')})
  }

  // 组件是否需要更新？ 组件被更新之前会自动执行 要求返回布尔类型结果
  shouldComponentUpdate() {
    console.log('shouldComponentUpdate')
    return true
    // return false 页面无反馈
  }

  // 组件更新前 shouldComponentUpdate执行并返回true时被执行 
  componentWillUpdate() {
    console.log('componentWillUpdate')
  }
  // 组件更新之后
  componentDidUpdate() {
    console.log('componentDidUpdate')
  }

  componentWillReceiveProps() {
    console.log('componentWillReceiveProps')
  }

  getTodoItem () {
    return (
      this.state.list.map((item, index) => {
        return (
          <Fragment key={index}>
            <TodoItem
              content={item}
              index={index}
              handleDelItem={this.handleItemDelete}/>
            {
              /*
                <div key={index}
                  onClick={this.handleItemDelete.bind(this, index)}
                  dangerouslySetInnerHTML={{__html:item}}
                  >
                </div>
              */
            }
          </Fragment>
        )
      })
    )
  }

  handleInputChange (e) {
    console.log(this.input)
    const value = e.target.value
    // es6写法 小括号()的意思是返回里面的对象
    this.setState(() => ({
      inputValue: value
    }));

    // react新版本推荐写法 setState里面传函数 就会变成异步设置数据
    // this.setState(() => {
    //   return {
    //     inputValue: e.target.value
    //   }
    // })

    // this.setState({
    //   inputValue: e.target.value
    // })
  }

  handleBtnClick () {
    // prevState就是改变之前的state 等同于this.state
    this.setState((prevState) => ({
      list: [...prevState.list, prevState.inputValue],
      inputValue: ''
    }), () => {
      // 这里setState执行完
      console.log(this.ul.querySelectorAll('div').length)
    });
    // this.setState({
    //   list: [...this.state.list, this.state.inputValue],
    //   inputValue: ''
    // })
    // console.log(this.ul.querySelectorAll('div').length)
  }

  handleItemDelete (index) {
    // immutable : state不允许我们做任何的改变
    this.setState((prevState) => {
      const list = [...prevState.list];
      list.splice(index, 1);
      return {list}
    });
    // const list = [...this.state.list]
    // list.splice(index, 1)
    // this.setState({
    //   list
    // })
  }

}

export default TodoList










